<template>
  <div class="product-detail" v-if="goodsList && goodsList.length > 0">
    <el-button
      class="back-home-button"
      type="primary"
      @click="goToHome"
      :icon="House"
    >
      返回首页
    </el-button>
    <div class="products-grid">
      <div
        v-for="product in goodsList"
        :key="product.id"
        class="carousel-content"
        :style="{ background: product.background }"
        @click="goToDetail(product.id)"
      >
        <div class="product-image">
          <el-image
            :src="product.picture"
            :alt="product.title"
            fit="contain"
            loading="lazy"
            :preview-teleported="false"
            :preview="false"  
          />
        </div>
        <div class="carousel-info">
          <div class="new-tag" v-if="product.name">{{ product.name }}</div>
          <h2 class="product-name" v-if="product.title">{{ product.title }}</h2>
          <p class="product-desc" v-if="product.description">
            {{ product.description }}
          </p>
          <el-button
            class="action-button"
            type="primary"
            :loading="loading"
            @click="handleButtonClick"
          >
            {{ product.buttonText || "立即购买" }}
          </el-button>
        </div>
      </div>
    </div>
  </div>
  <div v-else class="product-detail">
    <el-empty description="暂无商品信息"></el-empty>
  </div>
</template>
  
<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router"; // 添加这行
import { useRoute } from "vue-router";
import { getGoodsById } from "../../api/api";
import config from "../../config";

const router = useRouter();
const route = useRoute();
const goodsList = ref([]);

// 页面加载时获取数据
onMounted(async () => {
  await loadGoodsList();
});

const goToHome = () => {
  router.push('/');
};

const loadGoodsList = async () => {
  try {
    const productId = route.params.id;
    const response = await getGoodsById({ id: productId });
    console.log(response);
    // Add baseURL to image paths
    goodsList.value = response.map((item) => ({
      ...item,
      description: removeTags(item.description),
      picture: config.baseURL + item.picture,
    }));
    console.log(goodsList.value);
  } catch (error) {
    console.error("Failed to load product:", error);
  }
};
const removeTags = (str) => {
  return str.replace(/<[^>]+>/g, "");
};

const handleButtonClick = () => {
  // 处理按钮点击事件
  console.log("Button clicked for product:", product.value?.title);
};
const goToDetail = (productId) => {
  router.push(`/product/${productId}`);
};
</script>
  
<style scoped>
.product-detail {
  width: 100%;
  max-width: 1226px;
  margin: 0 auto;
  padding: 20px;
  margin-bottom: 200px;
  margin-top: 30px;
  position: relative;
}

.back-home-button {
  position: absolute;
  top: -30px;
  left: 20px;
  z-index: 1;
  margin-bottom: 20px;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.carousel-content {
  background: #fff;
  display: flex;
  height: 360px; /* 减小高度使布局更紧凑 */
  padding: 0 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.carousel-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  max-width: 55%;
}

.new-tag {
  font-size: 18px;
  margin-bottom: 20px;
  font-weight: 500;
}

.product-name {
  font-size: 24px; /* 减小字体大小 */
  margin-bottom: 10px;
}

.product-desc {
  font-size: 14px; /* 减小字体大小 */
  margin-bottom: 20px;
  line-height: 1.4;
}

.action-button {
  width: 120px;
  background: #ff6700;
  border: none;
  color: #fff;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.action-button:hover {
  background: #f25807;
  transform: translateY(-2px);
}

.product-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  max-width: 45%;
}

.product-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: white;
  padding: 20px;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.product-image img:hover {
  transform: scale(1.05);
}

@media (max-width: 1024px) {
  .products-grid {
    grid-template-columns: 1fr;
  }
}
</style>